<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50">
    <div class="app-container">
      <!-- 搜索区域 -->
      <div class="search-bar">
        <!-- 搜索 -->
        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="90px">
          <el-form-item label="产品名称" prop="productName">
            <el-input
              v-noSpace
              v-model="queryParams.productName"
              placeholder="请输入产品名称"
              clearable
              @keyup.enter="handleQuery"
              class="!w-[192px]"
            />
          </el-form-item>

          <el-form-item label="生产批次号" prop="prodCode">
            <el-input
              v-noSpace
              v-model="queryParams.prodCode"
              placeholder="请输入生产批次号"
              clearable
              @keyup.enter="handleQuery"
              class="!w-[192px]"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="search" @click="handleQuery">查询</el-button>
            <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格区域 -->
      <div class="bg-white p-6 rounded-lg shadow">
        <el-table v-loading="loading" :data="tabData" style="width: 100%">
          <el-table-column prop="code" label="生产批次号" />
          <el-table-column prop="productName" label="产品名称" />
          <el-table-column prop="productCode" label="产品编号" />
          <el-table-column label="质检报告">
            <template #default="scope">
              <FileUpload
                v-model="productReportImage"
                :showUploadBtn="false"
                :showDelBtn="false"
                :data="{ bizType: 'contract' }"
                style="width: 100%"
              />
            </template>
          </el-table-column>
          <el-table-column prop="materialName" label="原材料名称" />
          <el-table-column prop="materialCode" label="原材料编号" />
          <el-table-column label="原材料质检报告">
            <template #default="scope">
              <FileUpload
                v-model="materialReportImage"
                :showUploadBtn="false"
                :showDelBtn="false"
                :data="{ bizType: 'contract' }"
                style="width: 100%"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import productReviewAPI, { Inquire, Tabulation } from "@/api/quality/productReview";
import { ElMessage } from "element-plus";
// 搜索查询
const queryParams = reactive<Inquire>({
  productName: "",
  prodCode: "",
});
// 搜索ref
const queryFormRef = ref(ElForm);
// 表单数据
// const paramsInfo = reactive<QualityControlInfo>({});
// 表格数据
// 请求动画
const loading = ref(false);
const tabData = ref<Tabulation[]>(); // 查询
const productReportImage = ref();
const materialReportImage = ref();

function handleQuery() {
  loading.value = true;
  let data = JSON.parse(JSON.stringify(queryParams));
  productReviewAPI
    .getProductQualityTrace(data.productName, data.prodCode)
    .then((data) => {
      console.log(JSON.parse(JSON.stringify(data)).materialName);
      let list = JSON.parse(JSON.stringify(data));
      // console.log(data.productReportImage);
      // let a = {...data}

      if (list.productReportImage) {
        productReportImage.value = list.productReportImage.map((item: any) => {
          return {
            name: item.split("/").pop(),
            url: item,
          };
        });
      } else {
        productReportImage.value = [];
      }
      if (list.materialReportImage) {
        materialReportImage.value = list.materialReportImage.map((item: any) => {
          return {
            name: item.split("/").pop(),
            url: item,
          };
        });
      } else {
        materialReportImage.value = [];
      }
      tabData.value = [...([data] as any)];
      // console.log(tabData.value.physicalImage);
      // tabData = data
      // obj
      // total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}
// 重置
function handleResetQuery() {
  queryFormRef.value.resetFields();
  tabData.value = [];
  // handleQuery();
}
</script>

<style lang="scss" scoped>
@use "@/styles/css/public" as *;

.el-select :deep(.el-input__wrapper) {
  background-color: #fff;
  border: 1px solid #dcdfe6;
}

.el-table :deep(th.el-table__cell) {
  font-weight: 600;
  color: #606266;
  background-color: #f5f7fa;
}

.el-table :deep(.el-button--primary.el-button--link) {
  color: #409eff;
}
</style>
